<template>
	<view v-if="isLogin==true">
		<u-sticky :offset-top="0"  bg-color="#f6f7f8" >
			<view class="cflex-r" style="justify-content: center;align-items: center;height: 76rpx;background-color: white;">
				<view class="cflex-c" style="flex: 1;justify-content: center;align-items: center;"
				@tap="onTabClick(index)"
				 v-for="(item,index) in tabLists" :key="index">
					<view :style="{color:item.isSelect?'#333333':'#999999',fontWeight:item.isSelect?'bold':'normal'}">
						{{item.text}}
					</view>
					<view :style="{opacity:item.isSelect?1:0}" class="u-m-t-6" style="height: 9rpx;width: 45rpx;
					background-color:#ffbe0b;border-radius:11rpx;">
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 从这里开始为3个页订单页面展示在一起 -->
		<!-- 待确认状态 -->
		<view v-show="!noData" class="cflex-c cbg-white" 
			style="margin:30rpx 30rpx 0rpx 30rpx;border-radius: 15rpx;" v-for="(item,index) in lists" :key="index">
			<view class="cflex-r" style="justify-content: space-between;align-items: center;padding:0rpx 20rpx;" @tap="goDetail(item)">
				<view style="display: flex;height: 82rpx;justify-content: center;align-items: center;
				">
					<view class="u-m-r-16" style="color:#666666;font-weight:bold;">
						下单客户:
					</view>
					<view class="cflex-c-c">
						<image mode="aspectFill" :src="item.uAvatar" 
						style="width:45rpx;border-radius: 50%;height: 45rpx;"></image>
					</view>
					<view  class="u-m-l-14" style="color: #666666 ;font-weight: bold;">
						{{item.uName}}
					</view>
				</view>
				<view style="font-weight: bold;" :style="{color:item.status==7?'#656565':'#FF5400'}">
					{{item.params.statusDes}}
				</view>
			</view>
			<view style="height: 1rpx;border: 1rpx solid rgb(240,240,240);margin:0 20rpx;
			transform: scale(1,0.5);">
			</view>
			<view class="u-m-t-20 cflex-r" style="padding:0 20rpx 10rpx 20rpx;" @tap="goDetail(item)">
				<view class="cflex-c-c">
					<image mode="aspectFill" :src="item.iPhoto"
					style="width:128rpx;border-radius: 16rpx;height: 128rpx;"></image>
				</view>
				<view class="cflex-c u-m-l-20">
					<view class="u-font-16" style="font-weight: bold;color: #333333;">{{item.iName}}</view>
					<view class="u-m-t-10 u-font-12" style="font-weight: bold;" :style="{color:item.status==7?'#656565':'#FB8400'}">预约时间：</view>
					<view  style="font-size: 24rpx;" :style="{color:item.status==7?'#656565':'#FB8400'}" v-for="(item2,i) in item.orderTimeList">
						{{item2.day}}  {{item2.startTime}}至{{item2.endTime}}
					</view>
					<view class="cflex-r u-m-t-12 " style="align-items: center;">
						<view class="u-font-11" style="color: #999999;">
							总价{{item.totalPrice}}元，优惠{{item.youHuiPrice}}元
						</view>
						<view class="u-font-12" style="color: #333333;margin-left:10rpx;">
							实付{{item.realPrice}}元
						</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-10 u-m-b-15" style="background-color: rgb(255,200,200);
			width:100%;color:rgb(255,65,91);justify-content: center;
			display: flex;padding:10rpx 0rpx;" v-if="item.status<=3?true:false" @tap="goDetail(item)">
				<!-- <view>倒计时: {{item.params.daoJiShi}}</view>  {{item.params.juLi}}-->
				<view class="u-m-l-60" style="margin-left: 0%;">距离:{{item.params.juLi}}</view>
			</view>
			<view class="cflex-r" style="justify-content:space-between;margin:0 20rpx 20rpx 20rpx ;" v-show="item.status<=5?true:false">
				<!-- 第一个按钮 -->
				<view class="u-m-r-15"  style="width:150rpx;justify-content: center;
				display: flex;align-items: center;
				padding:6rpx 9rpx;border-radius:40rpx;" :style="{border:item.status>3?'':'3rpx rgb(112,112,112) solid'}" @tap="telClick(item)">{{item.status<=3?'拨打电话':''}}</view>
				
				<view class="cflex-r">
					<!-- 第二个按钮 -->
					<!-- <view class="u-m-r-15"  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;" :style="{border:item.status==4?'':'3rpx rgb(112,112,112) solid'}" @tap="refuseClick(item)" v-if="item.status==1">拒绝接单</view> -->
					<view class="u-m-r-15"  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;" :style="{border:item.status==4?'':'3rpx rgb(112,112,112) solid'}" @tap="daohangClick(item)" v-if="item.status==3 || item.status==2">导航</view>
					<!-- <view class="u-m-r-15"  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;" :style="{border:item.status==4?'':'3rpx rgb(112,112,112) solid'}" @tap="addClockClick" v-if="item.status==5">加钟</view> -->
					<!-- 第三个按钮 -->
					<view  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;border:3rpx rgb(251,133,0) solid;background-color: rgb(251,133,0);color:white;" v-if="item.status==1" @tap="orderClick(item)">确认接单</view>
					<view  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;border:3rpx rgb(251,133,0) solid;background-color: rgb(251,133,0);color:white;" v-if="item.status==2" @tap="goClick(item)">出发</view>
					<view  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;border:3rpx rgb(251,133,0) solid;background-color: rgb(251,133,0);color:white;" v-if="item.status==3" @tap="arriveClick(item)">到达</view>
					<view  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;border:3rpx rgb(251,133,0) solid;background-color: rgb(251,133,0);color:white;" v-if="item.status==4" @tap="startClick(item)">开始服务</view>
					<view  style="width:150rpx;justify-content: center;display: flex;align-items: center;padding:6rpx 9rpx;border-radius:40rpx;border:3rpx rgb(251,133,0) solid;background-color: rgb(251,133,0);color:white;" v-if="item.status==5" @tap="endClick(item)">结束服务</view>
				</view>
			</view>
		</view>
		
		<!-- 提示 -->
		<view>
			<u-modal v-model="show" :content="content" show-cancel-button  @confirm="agree()" @cancel="disagree()"></u-modal>
		</view>
	
		<!-- 从这里结束3个订单集合页面 -->
		<view v-show="!noData" class="u-p-20"><u-loadmore :status="status" /></view>
		
		<!-- 没有数据时显示 -->
		<view v-show="noData" class="cflex-c" style="justify-content: center;align-items: center;">
			<image src="../static/queSheng.png" mode="aspectFill" style="width: 100%;"></image>
			<text style="font-weight: bold;margin-top: 50rpx;font-size: 32rpx;">还没有订单哦</text>
		</view>
		
	</view>
	
	<view v-else>
		<view class="cflex-c-c">
			<image src="../static/queSheng.png" mode="aspectFill" style="width: 100%;"></image>
			<text class="u-m-t-30" style="font-size: 36rpx;color: #606367;">暂未登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: true,
				noData: false,
				show: false,
				content: "",
				btnStatus:null,
				btnID: null,
				tabLists:[
					{id:0,text:'全部订单',isSelect:true},
					{id:1,text:'待接单',isSelect:false},
					{id:2,text:'进行中',isSelect:false},
					{id:9,text:'已完成',isSelect:false},
					{id:4,text:'取消/售后',isSelect:false},
				],
				tabCurrentIndex:0,
				
				lists:[],
				
				tabList: [0,1,2,6,7],
				
				pages:{pageNo:1,pageSize:20},
				
				status: 'loading',
			}
		},
		onShow() {
			let isLogin = this.$store.state.isLogin;
			this.isLogin = isLogin;
			if(isLogin==true){
				this.pages.pageNo = 1
				this.orderReq();
			}else {
				return
			}
		},
		onLoad() {
			
		},
		onReachBottom() {
			if(this.status=='nomore')return;
			this.orderReq();
		},
		methods: {
			// 弹窗同意按钮事件
			agree(){
				this.$request("worker/order/changeOrderStatus",{orderId:this.btnID,status:this.btnStatus+1}).then(res=>{
					this.pages.pageNo=1;
					this.orderReq();
				})
			},
			// 弹窗取消按钮事件
			disagree(){
				
			},
			// 确认接单按钮
			orderClick({id}){
				uni.navigateTo({
					url:`../pagesB/order/order_detail?id=${id}`
				})
			},
			// 出发按钮
			goClick({id,status}){
				if(status==2){
					this.btnID = id;
					this.btnStatus = status;
					this.show = true;
					this.content = "确定出发吗？"
				}
			},
			// 到达按钮
			arriveClick({id,status}){
				if(status==3){
					this.btnID = id;
					this.btnStatus = status;
					this.show = true;
					this.content = "确定到达吗？"
				}
			},
			// 开始服务按钮
			startClick({id,status}){
				if(status==4){
					this.btnID = id;
					this.btnStatus = status;
					this.show = true;
					this.content = "确定开始服务吗？"
				}				
			},
			// 结束服务按钮
			endClick({id,status}){
				if(status==5){
					this.btnID = id;
					this.btnStatus = status;
					this.show = true;
					this.content = "确定结束服务吗？"
				}
			},
			// 拨打电话按钮
			telClick(item){
				uni.makePhoneCall({
				    phoneNumber: item.tel
				});
			},
			// 加钟按钮
			addClockClick(){},
			// 导航按钮
			daohangClick(item){
				// //console.log(item.lat,item.lng);
				uni.openLocation({
					// 目标位置的经纬度
					latitude: item.lat*1,
					longitude:item.lng*1,
					// 目标位置的名称
					name: item.address,
					// 目标位置的详细地址
					address: item.addressDes,
					// 地图缩放比例
					scale: 18,
					// 调用成功时的回调函数
					success: function(res) {
						console.log('调用成功：', res)
					},
					// 调用失败时的回调函数
					fail: function(res) {
						console.log('调用失败：', res)
					},
					// 调用完成时的回调函数
					complete: function(res) {
						console.log('调用完成：', res)
					}
				})
			},
			// 拒绝接单按钮
			refuseClick({id}){
				uni.navigateTo({
					url:`../pagesB/order/order_detail?id=${id}`
				})
			},
			orderReq(){
				this.status = "loading";
				let statu = this.tabList[this.tabCurrentIndex];
				console.log(statu);
				console.log(this.pages.pageNo,this.pages.pageSize);
				// //console.log(status);
				this.$request("worker/order/orderList",{status:statu,pageNo:this.pages.pageNo,pageSize:this.pages.pageSize}).then(res=>{
					console.log("orderList",res.data);
					let tempLists = res.data==null?[]:res.data;
					if(this.pages.pageNo== 1){
						this.lists = [];
					}
					this.lists = this.lists.concat(tempLists);
					if(tempLists.length<this.pages.pageSize){
						this.status = "nomore";
					}
					this.pages.pageNo = this.pages.pageNo +1;
					if(this.lists.length<=0){
						this.noData = true;
					}else {
						this.noData = false;
					}
				})
			},
			// 去往详情页
			goDetail({id}){
				// //console.log(id);
				uni.navigateTo({
					url:`../pagesB/order/order_detail?id=${id}`
				})
			},
			// 导航切换按钮
			onTabClick(index){
				this.tabLists[this.tabCurrentIndex].isSelect = false;
				this.tabLists[index].isSelect = true;
				this.tabCurrentIndex = index;
				this.pages.pageNo = 1;
				this.orderReq();
			}
		},
		computed:{
			
		}
	}
</script>

<style>
/* 以下的样式主要是为了动态切换样式(:class)使用 */
 .my-color-yellow{background-color: rgb(255,190,11);}

</style>
